<!--  -->
<template>
  <div>
    <div class="type_dialog">
      <el-dialog :visible.sync="dialogVisible" width="500px" height="210px">
        <template slot="title">
          <div class="tishi">
            <span> {{ title }}</span>
          </div>
        </template>
        <div>
          <el-input
            ref="inputs"
            type="textarea"
            :placeholder="placeholder"
            v-model="typetext"
            :rows="8"
            @keyup.enter.native="showType"
            @keydown.enter.native="onEnter"
          >
          </el-input>
          <slot></slot>
        </div>
        <div slot="footer" class="dialog-footer">
          <button class="btn_add" @click="showType">确 定</button>
          <button @click="dialogVisible = false" class="can_btn">取 消</button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typetext: '',
      dialogVisible: false,
      istype: '', //操作类型
      title: '',
      placeholder: '',
      autofocus: true //自动获取焦点
    }
  },
  props: {},
  created() {},
  methods: {
    showdialog(title, type, name, placeholder) {
      this.istype = type
      this.title = title
      this.dialogVisible = true
      this.placeholder = placeholder || ''
      if (this.istype == 'chang') {
        this.typetext = name
      } else {
        this.typetext = ''
      }
      this.focusBtn()
    },
    showdialog2() {
      this.typetext = ''
      this.focusBtn()
    },
    // 操作文本框回车不换行
    onEnter() {
      const e = window.event || arguments[0]
      if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) {
        e.returnValue = false
        return false
      }
    },
    showType() {
      if (this.typetext !== '') {
        console.log(this.typetext)
        if (this.istype == 'signin') {
          // 签到
          this.$emit('showSign', this.istype, this.typetext)
        } else if (this.istype == 'signout') {
          // 签退
          this.$emit('showSign', this.istype, this.typetext)
        }
      } else {
        this.$message.warning(this.placeholder)
      }
    },
    // 自动获取焦点
    focusBtn() {
      this.$nextTick(() => {
        this.$refs.inputs.focus()
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import './style.scss';
</style>
<style lang="scss">
.type_dialog {
  .el-dialog__header {
    border-bottom: 1px solid #f5f5f5;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
